
import { Graph } from '@antv/x6';
import { registryNode, createNode } from './node.config';

const useGraph = (el: HTMLElement) => {
  registryNode();
  const { width, height } = el.getBoundingClientRect();
  const graph = new Graph({
    container: el,
    background: {
      color: 'rgba(0, 0, 0, 0.05)'
    },
    width,
    height,
    grid: {
      type: 'mesh',
      args: {
        color: 'rgb(140, 140, 140)'
      },
      size: 20, // 网格大小 10px
      visible: true // 绘制网格，默认绘制 dot 类型网格
    }
  });
  graph.centerContent();


  const node = createNode(graph, 'service', {
    id: 'xx3',
    x: 300,
    y: 50,
    title: '电脑服务器'
  });
  const node1 = createNode(graph, 'gateway', {
    id: 'xx5',
    x: 20,
    y: 50,
    title: '电脑服务器'
  });
  const node2 = createNode(graph, 'gateway', {
    id: 'xx51',
    x: -220,
    y: 50,
    title: '电脑服务器123'
  });
  const node3 = createNode(graph, 'gateway', {
    id: 'xx54',
    x: -380,
    y: 50,
    title: '电脑服务器123'
  });
  graph.addNode(node);
  graph.addNode(node1);
  graph.addNode(node2);
  graph.addNode(node3);
  graph.addEdge({
    source: node,
    target: node1,
    // connector: { name: 'smooth' },
    attrs: {
      line: {
        stroke: '#1890ff',
        strokeDasharray: 5,
        targetMarker: 'classic',
        style: {
          animation: 'ant-line 30s infinite linear'
        }
      }
    }
  });
  const view = graph.findView(node);
  console.log(view);
  if (view) {
    view.animate('rect', {
      attributeType: 'css',
      attributeName: 'fill',
      from: 'red',
      to: 'rgb(0,0,0,0.5)',
      dur: '1s',
      repeatCount: 'indefinite'
    });
    // const anchorView = view.find('image.image-anchor')[0];
    // console.log(anchorView);
    view.animateTransform('image.image-bg', {
      attributeType: 'css',
      attributeName: 'transform',
      type: 'rotate',
      from: '360 40 64',
      to: '0 40 64',
      dur: '1.5s',
      repeatCount: 'indefinite'
    });
  }
};

export default {
  useGraph
};
